<template>
  <el-row type="flex">
    <el-col :span="12" class="left"
      ><img src="../assets/img/login_img.png" alt=""
    /></el-col>
    <el-col :span="12">
      <el-card class="box-card" shadow>
        <img class="logo" src="../assets/img/login_logo.png" alt="" />
        <h3 class="title">电商后台管理系统</h3>
        <!-- <el-form :model="user" :rules="rules" ref="userForm"> -->
        <!-- :rulus与 el-form-item的prop属性的一一对应，rules可以写多个 -->
        <el-form :model="user" :rules="$rules.user" ref="userForm">
          <el-form-item prop="username">
            <el-input placeholder="请输入用户名" v-model="user.username">
              <template #prefix>
                <i class="el-input__icon el-icon-user"></i>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              type="password"
              placeholder="请输入密码"
              show-password
              v-model="user.password"
            >
              <template #prefix>
                <i class="el-input__icon el-icon-lock"></i>
              </template>
              <!-- 已废弃写法 -->
              <!-- <i slot="prefix" class="el-input__icon el-icon-lock"></i> -->
              <!-- <template #suffix>
                <i class="el-input__icon el-icon-view"></i>
              </template> -->
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button class="login-btn" type="primary" @click="doLogin()"
              >登录</el-button
            >
          </el-form-item>
        </el-form>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
export default {
  data() {
    return {
      user: {
        username: "",
        password: "",
      },
      // rules: {
      //   username: [
      //     { required: true, message: "用户名不能为空", trigger: "blur" },
      //     { min: 3, message: "用户名小于3位", trigger: "blur" },
      //   ],
      //   password: [
      //     { required: true, message: "密码不能为空", trigger: "blur" },
      //     { min: 3, message: "用户名小于3位", trigger: "blur" },
      //   ],
      // },
    };
  },
  methods: {
    async doLogin() {
      try {
        // console.log(this.$refs.userForm);
        //validate：对整个表单进行校验的方法，参数为一个回调函数。
        //该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。
        //若不传入回调函数，则会返回一个 promise
        await this.$refs.userForm.validate(); //对$refs里的userForm(该表单的输入值)进行校验
        //调用$api里的userLogin(),拿到后台数据
        let  data = await this.$api.userLogin(this.user);
        //根据状态码的值返回的error，阻止页面跳转
        if (data == "error") return;

        // 在vuex仓库中存储 user 信息和 token 数据
        // this.$store.commit("setUser",data)
        // this.$store.commit("setToken",data.token)
        this.$store.dispatch("setLoginUser",data)
         this.$message.success("登陆成功");
        //  console.log(11111,this.$rules)
        //登陆成功页面的跳转
        this.$router.push({
          name: "home",
        });
      } catch (error) {
        console.log("LoginView-error:", error);
        // this.$message.error(meta.msg);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.el-row {
  background-color: @bc;
  height: 100%;
}
.el-col {
  align-self: center;
  padding-left: 60px;
}
.el-col.left {
  text-align: right;
  padding-left: 0px;
  padding-right: 60px;
}
.el-card {
  display: inline-block;
  width: 400px ;
  min-width: 400px !important;
  height: 340px;
  position: relative;
  overflow: unset;
  // 局部变量
  @wh: 160px;
  .logo {
    position: absolute;
    background-color: white;
    border: 6px solid @bc;
    border-radius: 50%;
    width: @wh;
    height: @wh;
    box-sizing: border-box;
    // padding: (@wh / 20);
    padding: 15px 20px 25px;
    top: -(@wh / 2);
    left: 50%;
    transform: translate(-50%);
  }
  .title {
    margin: 0px;
    margin-top: (@wh / 2);
    text-align: center;
    font-size: 24px;
    font-weight: 400;
  }
}

.el-form {
  margin: 20px 20px 0 20px;
    // width: 100%;
    // .el-input {
    //   width: 280px;
    // }
  .login-btn {
    width: 100%;
  }
}
</style>